import 'package:badges/badges.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:get/get.dart';
import 'package:wangziyi/widget/showBottomSheet.dart';
import 'package:wangziyi/widget/toast.dart';

import '../app_home_logic.dart';
import '../app_home_state.dart';
import 'product_details_logic.dart';
import 'product_details_state.dart';

class ProductDetailsPage extends StatelessWidget {
  final ProductDetailsLogic logic = Get.put(ProductDetailsLogic());
  final ProductDetailsState state = Get.find<ProductDetailsLogic>().state;
  final AppHomeState parentState = Get.find<AppHomeLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        child: AppBar(
          backgroundColor: Colors.transparent,
        ),
        preferredSize: Size.fromHeight(0),
      ),
      body: Container(
        color: Color(0xf33dedede),
        child: ListView.separated(
          itemCount: 9,
          itemBuilder: (context, index) {
            if (index == 0) {
              return Container(
                  color: Color(0xfdedede),
                  height: Get.context.heightTransformer(reducedBy: 60),
                  child: Image.network(
                      parentState.imgList[parentState.productIndex.value]));
            }
            //商品价格、标题
            else if (index == 1) {
              return Container(
                padding: EdgeInsets.only(left: 10, right: 20, bottom: 10),
                color: Colors.white,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('￥9.9',
                            style: TextStyle(color: Colors.red, fontSize: 22)),
                        Expanded(child: SizedBox()),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(Icons.collections, size: 20),
                            Text('收藏', style: TextStyle(fontSize: 12))
                          ],
                        )
                      ],
                    ),
                    Text(
                        "商品标题'${parentState.productIndex.value}''${parentState.imgList[parentState.productIndex.value]}'",
                        maxLines: 2,
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w900,
                        ))
                  ],
                ),
              );
            }
            //商品参数选择
            else if (index == 2) {
              return GestureDetector(
                child: Container(
                    color: Colors.white,
                    child: ListTile(
                        leading: Text(
                          '已选',
                          style: TextStyle(fontWeight: FontWeight.w900),
                        ),
                        title: Text("商品ID${parentState.productIndex}，1件"),
                        trailing: Icon(Icons.more_horiz))),
                onTap: () {
                  //抽取方法复用
                  return showBottomSheets(
                    //上下文
                      context,
                      //body
                      commodityParameters_body(),
                      //bottomnavigationbar
                      commodityParameters_bottom(),
                      //导航栏部分数据
                      commodityParameters_flexibleSpace());
                },
              );
            }
            //发货地址
            else if (index == 3) {
              return GestureDetector(
                child: Container(
                    color: Colors.white,
                    child: ListTile(
                        leading: Text(
                          '送至',
                          style: TextStyle(fontWeight: FontWeight.w900),
                        ),
                        title: Row(
                          children: [
                            Icon(
                              Icons.location_on_outlined,
                              color: Colors.deepOrange,
                              size: 20,
                            ),
                            Text("上海宝山区罗店镇美兰湖10号101"),
                          ],
                        ),
                        trailing: Icon(Icons.more_horiz))),
                onTap: ()=>showBottomSheets(context,
                    Center(child: Text("sb")),
                    Container(
                      padding: EdgeInsets.all(10),

                      child:
                      MaterialButton(onPressed: ()=>"",child:MaterialButton(
                          height: 40,
                            minWidth:  Get.size.width,
                          onPressed: () => "",
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.all(Radius.circular(20))),
                          color: Colors.deepOrange,
                          child: Text('选择其他地址', style: TextStyle(color: Colors.white))) ,)
                      ,),
                    Center(child: Text('配送至'))),
              );
            }
            //服务
            else if (index == 4) {
              return Container(
                padding: EdgeInsets.only(left: 10, right: 10),
                color: Colors.white,
                child: Wrap(
                  children: <Widget>[
                    Chip(
                      label: Text(
                        '七天无理由退货',
                        style: TextStyle(fontSize: 12),
                      ),
                      backgroundColor: Color(0xffffff),
                      avatar: Icon(
                        Icons.check_circle_outline,
                        color: Colors.deepOrange,
                        size: 15,
                      ),
                    ),
                    Chip(
                      label: Text('运费险', style: TextStyle(fontSize: 12)),
                      backgroundColor: Color(0xffffff),
                      avatar: Icon(
                        Icons.check_circle_outline,
                        color: Colors.deepOrange,
                        size: 15,
                      ),
                    ),
                    Chip(
                      label: Text('急速退款', style: TextStyle(fontSize: 12)),
                      backgroundColor: Color(0xffffff),
                      avatar: Icon(
                        Icons.check_circle_outline,
                        color: Colors.deepOrange,
                        size: 15,
                      ),
                    ),
                    Chip(
                      label: Text('急速审核', style: TextStyle(fontSize: 12)),
                      backgroundColor: Color(0xffffff),
                      avatar: Icon(
                        Icons.check_circle_outline,
                        color: Colors.deepOrange,
                        size: 15,
                      ),
                    ),
                  ],
                ),
              );
            }
            //评论
            else if (index == 5) {
              return Container(
                padding: EdgeInsets.all(10),
                color: Colors.white,
                child: Column(
                  children: [
                    Container(
                      child: Row(
                        children: [
                          Text('评论(99+)',
                              style: TextStyle(fontWeight: FontWeight.w900)),
                          Expanded(child: SizedBox()),
                          Text('查看全部',
                              style: TextStyle(
                                  fontWeight: FontWeight.w900,
                                  color: Colors.grey)),
                          Icon(Icons.chevron_right, color: Colors.grey)
                        ],
                      ),
                    ),
                    Wrap(
                      alignment: WrapAlignment.start,
                      spacing: 5,
                      children: <Widget>[
                        Chip(
                            label: Text(
                              '柔软舒适',
                              style: TextStyle(fontSize: 12),
                            ),
                            backgroundColor: Color(0xffFFCCCC)),
                        Chip(
                            label: Text(
                              '柔软舒适',
                              style: TextStyle(fontSize: 12),
                            ),
                            backgroundColor: Color(0xffFFCCCC)),
                        Chip(
                            label: Text(
                              '尺码标准',
                              style: TextStyle(fontSize: 12),
                            ),
                            backgroundColor: Color(0xffFFCCCC)),
                        Chip(
                            label: Text(
                              '外观漂亮',
                              style: TextStyle(fontSize: 12),
                            ),
                            backgroundColor: Color(0xffFFCCCC)),
                        Chip(
                            label: Text(
                              '做工精美',
                              style: TextStyle(fontSize: 12),
                            ),
                            backgroundColor: Color(0xffFFCCCC)),
                        Chip(
                            label: Text(
                              '款型极佳',
                              style: TextStyle(fontSize: 12),
                            ),
                            backgroundColor: Color(0xffFFCCCC)),
                      ],
                    ),
                    ListTile(
                      leading: ClipOval(
                        child: Image.asset(
                          'assets/images/touxiang.png',
                          height: 50,
                          width: 50,
                        ),
                      ),
                      title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('王*伊', style: TextStyle(fontSize: 15)),
                          Text('29天前',
                              style:
                                  TextStyle(fontSize: 15, color: Colors.grey)),
                        ],
                      ),
                      subtitle: Text(
                          '宝贝收到了，非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好非常好，我很喜欢',
                          maxLines: 2,
                          style: TextStyle(color: Colors.black)),
                    ),
                    SizedBox(height: 10),
                    ListTile(
                      leading: ClipOval(
                        child: Image.asset(
                          'assets/images/touxiang.png',
                          height: 50,
                          width: 50,
                        ),
                      ),
                      title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('王*伊', style: TextStyle(fontSize: 15)),
                          Text('29天前',
                              style:
                                  TextStyle(fontSize: 15, color: Colors.grey)),
                        ],
                      ),
                      subtitle: Text(
                          '宝贝收到了，非常好，我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢我很喜欢',
                          maxLines: 2,
                          style: TextStyle(color: Colors.black)),
                    )
                  ],
                ),
              );
            }
            //问答
            else if (index == 6) {
              return Container(
                color: Colors.white,
                padding: EdgeInsets.all(10),
                child: Column(
                  children: <Widget>[
                    Container(
                      child: Row(
                        children: [
                          Text('暂无问答',
                              style: TextStyle(fontWeight: FontWeight.w900)),
                          Expanded(child: SizedBox()),
                          Text('查看全部',
                              style: TextStyle(
                                  fontWeight: FontWeight.w900,
                                  color: Colors.grey)),
                          Icon(Icons.chevron_right, color: Colors.grey)
                        ],
                      ),
                    ),
                    Container(
                      child: Center(
                        child: Text('商品好不好，问问买过的人吧！'),
                      ),
                    ),
                    Chip(label: Text('问问买家'))
                  ],
                ),
              );
            }
            //商家信息
            else if (index == 7) {
              return Container(
                padding: EdgeInsets.all(10),
                color: Colors.white,
                child: Column(
                  children: <Widget>[
                    ListTile(
                      leading: Container(
                          height: 60,
                          width: 60,
                          decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10)),
                              image: DecorationImage(
                                  image:
                                      AssetImage('assets/images/touxiang.png'),
                                  fit: BoxFit.cover))),
                      title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('商家名称'),
                          Text('999人关注', style: TextStyle(fontSize: 13)),
                          Row(
                            children: <Widget>[
                              Text(
                                '评价：8.45',
                                style: TextStyle(fontSize: 11),
                              ),
                              SizedBox(
                                width: 5,
                              ),
                              Text('物流：9.0', style: TextStyle(fontSize: 11)),
                              SizedBox(
                                width: 5,
                              ),
                              Text('售后：8.60', style: TextStyle(fontSize: 11)),
                            ],
                          )
                        ],
                      ),
                    ),
                    Chip(label: Text('进店逛逛'))
                  ],
                ),
              );
            }
            //商品详情
            else if (index == 8) {
              return Container(
                padding: EdgeInsets.all(10),
                color: Colors.white,
                child: Column(
                  children: <Widget>[
                    Container(
                      child: Text('商品详情',
                          style: TextStyle(fontWeight: FontWeight.w900)),
                    ),
                    Image.network(
                        parentState.imgList[parentState.productIndex.value]),
                    Image.network(
                        parentState.imgList[parentState.productIndex.value]),
                    Image.network(
                        parentState.imgList[parentState.productIndex.value]),
                    Image.network(
                        parentState.imgList[parentState.productIndex.value]),
                    Image.network(
                        parentState.imgList[parentState.productIndex.value]),
                  ],
                ),
              );
            }

            return Text('sb');
          },
          separatorBuilder: (context, index) {
            return Divider(
              color: Colors.transparent,
              height: index == 2 || index == 3 ? 1 : 10,
            );
          },
        ),
      ),
      //底部按钮
      bottomNavigationBar: Container(
        color: Colors.white,
        height: 70,
        child: Row(
          children: <Widget>[
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(
                    Icons.business,
                    size: 20,
                  ),
                  Text('商家',
                      style: TextStyle(fontSize: 13, color: Colors.black54))
                ],
              ),
              flex: 1,
            ),
            Expanded(
              child: GestureDetector(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.message,
                      size: 20,
                    ),
                    Text('客服',
                        style: TextStyle(fontSize: 13, color: Colors.black54))
                  ],
                ),
                onTap: ()=>state.cartNumber.value++,
              ),

              flex: 1,
            ),
            Expanded(
              child: GestureDetector(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    //角标
                    Badge(

                      borderSide: BorderSide(color: Colors.red,width: 1.2),
                      elevation: 0,
                      badgeColor: Colors.white,

                      badgeContent: Obx(()=>Text('${state.cartNumber.value}',style: TextStyle(color: Colors.red,fontSize: 10,fontWeight: FontWeight.w900),)),
                      child: Icon(
                        Icons.shopping_cart,
                        size: 20,
                      ),
                    ),
                    Text('购物ss车',
                        style: TextStyle(fontSize: 13, color: Colors.black54))
                  ],
                ),
                onTap: (){
                  Mytoast("msg");
                },
              ),
              flex: 1,
            ),
            SizedBox(
              width: 5,
            ),
            Expanded(
              child: bottomMaterialButton('加入购物车', Colors.pink),
              flex: 2,
            ),
            SizedBox(
              width: 5,
            ),
            Expanded(
              child: bottomMaterialButton('立即购买',Colors.deepOrange),
              flex: 2,
            )
          ],
        ),
      ),
    );
  }

  MaterialButton bottomMaterialButton(String text,Color buttonColor) {
    return MaterialButton(
                height: 40,
                onPressed: (){
                  if(text=='确定'){
                      if(state.InString.value=='加入购物车'){
                        state.cartNumber.value++;
                        Get.back();
                      }else{

                      }
                  }else{
                    //记录是从哪个选项进入购物车
                    state.InString.value=text;
                    // Mytoast(text);
                    return showBottomSheets(
                      //上下文
                        Get.context,
                        //body
                        commodityParameters_body(),
                        //bottomnavigationbar
                        bottomMaterialButton('确定',buttonColor),
                        //导航栏部分数据
                        commodityParameters_flexibleSpace());
                  }
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                color: buttonColor,
                child: Text(text, style: TextStyle(color: Colors.white)));
  }

  Widget commodityParameters_flexibleSpace() {
    return Container(
                        padding: EdgeInsets.all(10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            ClipRRect(
                              borderRadius: BorderRadius.circular(10),
                              child: Container(
                                height: 100,
                                width: 100,
                                color: Colors.white,
                                child: Image.network(
                                  parentState.imgList[
                                      parentState.productIndex.value],
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            Text(
                              '￥9.9',
                              style: TextStyle(
                                  color: Colors.red,
                                  fontSize: 25,
                                  fontWeight: FontWeight.w700),
                            )
                          ],
                        ));
  }

  Widget commodityParameters_bottom() {
    return Container(
                      color: Colors.white,
                      padding: EdgeInsets.all(10),
                      height: 60,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Expanded(
                            child: MaterialButton(
                                height: 40,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(20))),
                                color: Colors.pink,
                                child: Text(
                                  '加入购物车',
                                  style: TextStyle(color: Colors.white),
                                ),
                                onPressed: () => ""
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: MaterialButton(
                                height: 40,
                                onPressed: () => "",
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(20))),
                                color: Colors.deepOrange,
                                child: Text(
                                  '立即购买',
                                  style: TextStyle(color: Colors.white),
                                )),
                          )
                        ],
                      ),
                    );
  }

  ListView commodityParameters_body() {
    return ListView.builder(
                        itemBuilder: (context, index) {
                          if(index==2){
                            return Container(
                              padding: EdgeInsets.all(10),
                              child:
                              Row(children: <Widget>[
                                Text('数量',style: TextStyle()),
                                SizedBox(width: 10,),
                                Text('库存999件',style: TextStyle(color: Colors.grey)),
                                Expanded(child: SizedBox()),
                              Obx(()=>IconButton(icon: Icon(Icons.chevron_left,color: state.minNumber<=1?Color(0xffdedede):Colors.black,), onPressed: ()=>logic.numberDetele())),
                                Obx(()=>Container(width:30,height:20,color:Color(0xff99dedede),child: Center(child: Text("${state.minNumber.value}")))),
                                IconButton(icon: Icon(Icons.add), onPressed:()=>logic.numberAdd())
                              ],)
                              ,);
                          }

                          return Container(
                            padding: EdgeInsets.all(10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(state.itemTitle[index]),
                                Wrap(
                                    spacing: 20,
                                    children: logic.chipItem(index)),
                              ],
                            ),
                          );
                        },
                        itemCount: 3);
  }

  Future showBottomSheets(BuildContext context, Widget body,
      Widget bottomNavigationBar, Widget flexibleSpace) {
    return showModalBottomSheet(
        //设置为自定义高度
        isScrollControlled: true,
        //设置圆角
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(20))),
        context: context,
        builder: (context) {
          return SizedBox(
            height: Get.context.heightTransformer(reducedBy: 30),
            child: Scaffold(
                appBar: PreferredSize(
                  preferredSize: Size.fromHeight(110),
                  child: AppBar(
                      //去掉前面的返回键
                      backgroundColor: Colors.transparent,
                      elevation: 0,
                      automaticallyImplyLeading: false,
                      flexibleSpace: flexibleSpace),
                ),
                body: body,
                bottomNavigationBar: bottomNavigationBar),
          );
        });
  }
}
